<template>
  <div class="page-container">
    <div ref="chart" class="container-charts"></div>
  </div>
</template>

<script>
import { TotalAreaCropsProportion } from "../request/api";
export default {
  data() {
    return {};
  },
  mounted() {
    this.init();
    this.getData();
    //自适应
    this.screen();
    window.addEventListener("resize", this.screen);
  },
  destroyed() {
    window.removeEventListener("resize", this.screen);
  },
  methods: {
    async init() {
      //获取节点
      let chart = this.$refs.chart;
      //初始化echart
      let myChart = this.$echart.init(chart);
      this.info = myChart;

      //配置项
      let options = {
        title: {
          text: "种植农作物面积统计",
          left:"10",
          left:20
        },
        legend: {
          show: true,
          icon: "circle",
          left: "10%",
          top: "15%",
          
        },
        //提示框组件
        tooltip: {
          show: true,
        },
        legend:{
            top:"10%"
        },
        // grid: {
        //             top: '15 %',
        //             left: '0%',
        //             bottom: '10 %',
        //             right: '10 %'
        //         },
        //数据列
        series: [
          {
            type: "pie",
            // radius:'50%',
            // data:valuelist
            top:'20%'
          },
        ],
      };
      //给chart设置配置项
      myChart.setOption(options);
    },
    async getData() {
      //调借口
      let result = await TotalAreaCropsProportion();
      // console.log(result);
      let valuelist = result.data.map((item) => {
        return {
          value: item.value,
          name: item.name,
        };
      });
      console.log(valuelist);
      this.setoption(valuelist);
    },
    //设置options
    setoption(valuelist) {
      let options = {
        series: [
          {
            type: "pie",
            data: valuelist,
          },
        ],
      };
      this.info.setOption(options);
    },
    //  自适应
    screen() {
      // 图表自适应
      this.info.resize();
      // 标题字体自适应
      let width = this.$refs.chart.offsetWidth;
      let num = (width / 100) * 6;

      // 重新设置字体样式
      let options = {
        title: {
          textStyle: {
            fontSize: num,
          },
        },
      };
      this.info.setOption(options);
    },
  },
};
</script>

<style lang="" scoped>
</style>
